<template>
  <div>
    <ChartTools class="chart">
      <template v-slot:left>
        <h3>运营人员(当天)</h3>
        <div class="left">
          <div>
            <div class="number">{{ TopListleft.total ||'' }}</div>
            <p>工单总数(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListleft.completedTotal }}</div>
            <p>完成工单(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListleft.cancelTotal }}</div>
            <p>拒绝工单(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListleft.workerCount }}</div>
            <p>运营人员数(个)</p>
          </div>
        </div>
      </template>
      <template v-slot:right>
        <h3>运维人员(当天)</h3>
        <div class="right">
          <div>
            <div class="number">{{ TopListright.total }}</div>
            <p>工单总数(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListright.completedTotal }}</div>
            <p>完成工单(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListright.cancelTotal }}</div>
            <p>拒绝工单(个)</p>
          </div>
          <div>
            <div class="number">{{ TopListright.workerCount }}</div>
            <p>运维人员(个数)</p>
          </div>
        </div>
      </template>
    </ChartTools>
  </div>
</template>

<script>
import { getDateEnd } from '@/utils/getTime'
import { taskReportInfo } from '@/api/userIndex'
export default {
  data() {
    return {
      TopTime: {
        start: `${getDateEnd()} 00:00:00`,
        end: `${getDateEnd()} 23:59:59`
      },
      TopListleft: {},
      TopListright: {}
    }
  },
  created() {
    this.taskReportInfo()
  },
  methods: {
    async taskReportInfo() {
      const { data } = await taskReportInfo(this.TopTime)
      this.TopListleft = data[0]
      this.TopListright = data[1]
    }
  }
}
</script>

<style>

</style>
